<template>
    <div class='comp'>
        <!-- 图表区域 -->
        <div class='chart' ref='crosswise'></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            echartsInstance:null,//存储echarts实例对象
            allData:[]//业务数据
        };
    },
    mounted() {
        // 1.定义获取实例 设置基础静态配置项的绘图方法
        this.initEcharts()
        // 2.获取业务数据
        this.getData()
        // 3.监听窗口变化
        window.addEventListener('resize',this.adapTive)
        // 4.使用适配方法
        this.adapTive()
    },
    methods: {
        // 1.定义获取实例 设置基础静态配置项的绘图方法
        initEcharts(){
           // 1.1获取实例对象
            this.echartsInstance = this.$echarts.init(this.$refs.crosswise,'dark')
            // 1.2设置静态配置项（配置项是不会变的）
            let initOptions={
               // 配置标题
               title:{
                    text:"▍全国地区种植收成情况",
                    top:"3%",
                    left:"3%"
                },
                // 坐标系
                grid:{
                    show:false,
                    top:"12%",
                    bottom:"3%",
                    left:"3%",
                    right:"3%",
                    containLabel:true
                },
                // 提示语
                tooltip:{
                    show:true,
                    trigger:'axis',
                    axisPointer:{
                        type:"shadow"
                    }
                },
                // x
                xAxis:{
                    type:"category"
                },
                // y
                yAxis:{
                    type:"value"
                },
                series:[
                    {
                        type:'bar',
                        itemStyle:{
                            color:{
                                type:"linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops:[{
                                    offset:0,color:'orange'
                                },{
                                    offset:1,color:'orangered'
                                }],
                            }
                        },
                        label:{
                            show:true,
                            // position:"right"
                        }
                    }
                ]
            }
            // 1.3绘制图表
            this.echartsInstance.setOption(initOptions)
        },
        // 2.获取业务数据
        async getData(){
            let {data} = await this.$http.get('plantingHarvest')
            this.allData = data;
            // console.log(data)
            this.setEcharts()
        },
        // 3.根据业务数据继续完善图表
        setEcharts(){
            // 3.1获取类目轴上数据及系列上的数据
            let categoryData = this.allData.map(item=>item.month)
            let serirseData = this.allData.map(item=>item.harvest)
            // 3.2设置完善的配置项
            let setOptions={
                xAxis:{
                    data:categoryData//配置类目轴数据
                },
                series:[
                    {
                        data:serirseData//配置系列数据
                    }
                ]
            }
            // 3.3再次绘制图表 setOption()可以将多次的绘图配置项合拼重置绘制新的图表
            this.echartsInstance.setOption(setOptions)
        },
        // 4.窗口适配
        adapTive(){
            console.log('窗口适配了')
            // 设置比例尺
            let width = this.$refs.crosswise.offsetWidth;
            // 比例尺基数3.5-3.7
            let scale = width/100*3.6
            let adapOption={
                // 配置标题
                title:{
                    textStyle:{
                        fontSize:scale
                    }
                },
                series:[
                    {
                        barWidth:scale,
                        itemStyle:{
                            borderRadius:[scale/2,scale/2,0,0]//设置圆角大小
                        }
                    }
                ]
            }
            // 重新适配绘制图表
            this.echartsInstance.setOption(adapOption)
            this.echartsInstance.resize()//只能处理坐标系内的图表大小
        }
    },
    beforeDestroy(){
        // 注销窗口监听器 防止内存泄露
        window.removeEventListener('resize',this.adapTive)
    }
};
</script>

<style scoped>

</style>
